<!-- 艺人-关注艺人 -->
<template>
	<view class="page-box">
		<view class="page-main-box">
			<view class="artist-list-box" :style="!dataList.length ? 'justify-content: center;' : ''">
				<noData style="margin-top: 40rpx;" v-if="!dataList.length"></noData>
				<template v-else>
					<view v-for="(item,index) in dataList" :key="index" class="item"
						@tap="handleTo(`/pages/artist/info?id=${item.id}${cateId? `&cateId=${cateId}` : ''}`)">
						<image style="width: 100%;height: 100%;border-radius: 16rpx;" :src="item.coverUrl"></image>
						<view class="content">
							<text>{{item.stageName}}</text>
							<view class="tag-box">
								<text>{{`${item.age}岁`}}</text>
								<text>{{`${item.height}cm`}}</text>
								<text>{{`${item.weight}kg`}}</text>
							</view>
						</view>

						<!-- 						<view class="box" @tap.stop="handleFollow(item)">
							<image src="/static/images/followIcon2.png"image>
						</view> -->
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import noData from '@/components/noData/noData.vue'
	import {
		postUserList,
		postUserFollower
	} from '@/api/artist.js'
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'
	export default {
		name: 'follow',
		props: {},
		components: {
			noData
		},
		computed: {
			...mapGetters(['userInfo', 'isLogin']),
		},
		data() {
			return {
				dataList: [],
				queryState: {
					pageNum: 1,
					pageSize: 10,
					total: 0,
					isQuery: true
				}
			};
		},
		async created() {
			this.handleInit()
		},
		async onPullDownRefresh() {
			this.handlePullDownRefresh()
		},
		async onReachBottom() {
			this.handleReachBottom()
		},
		methods: {
			async handleFollow({
				isFollow,
				id: artistId
			}) {
				const {
					id: userId
				} = this.userInfo
				try {
					await postUserFollower({
						userId,
						artistId
					}).then(res => {
						if (res.code !== 200) {
							uni.showToast({
								duration: 5000,
								icon: 'none',
								title: res.msg || '请求失败'
							})
							return
						}
						uni.showToast({
							duration: 5000,
							icon: 'none',
							title: '操作成功'
						})
						this.handleInit()
					})
				} catch ({
					message: title = '关注失败'
				}) {
					uni.showToast({
						duration: 5000,
						icon: 'none',
						title
					})
				}
			},
			async handleInit() {
				const {
					pageNum,
					pageSize
				} = this.queryState
				const {
					id: userId
				} = this.userInfo
				const params = {
					pageNum,
					pageSize,
					userId
				}
				try {
					const {
						rows,
						total,
					} = await postUserList(params)
					if (pageNum === 1) this.dataList = []
					this.dataList = this.dataList.concat(rows)
					Object.assign(this.queryState, {
						isQuery: this.dataList.length < total,
						total
					})
				} catch ({
					message: title = '获取结果详情失败'
				}) {
					Object.assign(this.queryState, {
						isQuery: false
					})
					uni.showToast({
						duration: 5000,
						icon: 'none',
						title
					})
				}
			},
			async handleReachBottom() {
				if (!this.queryState.isQuery) return false
				this.queryState.pageNum++
				await this.handleInit()
			},
			async handlePullDownRefresh() {
				Object.assign(this.queryState, {
					pageNum: 1
				})
				await this.handleInit()
				uni.stopPullDownRefresh()
				uni.showToast({
					duration: 5000,
					title: '刷新成功',
					icon: 'none'
				})
			},
			handleTo(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	.page-box {
		position: relative;
		box-sizing: border-box;
		background: linear-gradient(180deg, rgba(238, 212, 215, 0.8) 0%, rgba(202, 191, 192, 0) 100%);
		min-height: 100vh;

		.page-main-box {
			width: 100%;
			padding: 0 32rpx;
			box-sizing: border-box;
			position: absolute;
			top: 0;
			padding-top: 32rpx;
		}
	}

	.artist-list-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;


		.box {
			position: absolute;
			bottom: 0;
			right: 16rpx;

			&>image {
				width: 70rpx;
				height: 70rpx;
			}
		}

		.item {
			position: relative;
			width: 328rpx;
			height: 360rpx;
			border-radius: 16rpx;
			color: #FDF3F3;
			margin-bottom: 16rpx;

			.content {
				position: absolute;
				display: flex;
				flex-direction: column;
				left: 16rpx;
				bottom: 24rpx;

				&>text {
					margin-bottom: 16rpx;
					font-size: 28rpx;
					font-weight: bold;
				}

				.tag-box {
					display: flex;
					flex-wrap: wrap;
					margin-bottom: -8rpx;

					text {
						color: #FDF3F3;
						font-size: 18rpx;
						padding: 0 10rpx;
						height: 34rpx;
						line-height: 34rpx;
						border-radius: 17rpx;
						margin-right: 8rpx;
						margin-bottom: 8rpx;

						&:nth-child(1) {
							background: rgba(236, 96, 111, 0.8);
						}

						&:nth-child(2) {
							background: rgba(245, 139, 41, 0.8);
						}

						&:nth-child(3) {
							background: rgba(113, 98, 234, 0.8);
							margin-right: 0;
						}
					}
				}
			}
		}
	}
</style>